<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>用户信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__STATIC__/index/css/mui.min.css">
    <link rel="stylesheet" href="__STATIC__/index/css/commen.css" />
    <style type="text/css">
        body,
        .mui-bar-nav,
        .mui-content,
        .useBtn,
        .left_dot,
        .right_dot {
            background-color: #DD4D56;
        }
        .chColor{
            background-color: #755c6c;
        }
        .btnColor{
            background-color: #755c6c;
        }
        .infoBox {
            background-color: #fff;
            margin: 0 3%;
            border-radius: 5px;
            /*height: 1200px;*/
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .infoTop {
            border-bottom: 1px dashed #E7E7E7;
            position: relative;
        }

        .infoTop_ul,
        .useBtn {
            text-align: center;
        }
        .Btn {
            text-align: center;

        }
        .infoTop_ul li:first-child(5) {
            margin-top: 20px;
        }
        .infoTop_ul li:nth-child(5) {
            margin-bottom: 20px;
        }

        .infoTop_ul li:last-child {
            margin-bottom: 0;
        }

        .cardLogo {
            width: 71px;
        }

        .li_cardName {
            color: #333;
            font-size: 24px;
        }

        .useBtn {
            width: 175px;
            height: 36px;
            border-radius: 3px;
            color: #fff;
            line-height: 36px;
            margin: auto;
        }
        .Btn {
            width: 175px;
            height: 36px;
            border-radius: 3px;
            color: #fff;
            line-height: 36px;
            margin: auto;
        }

        .infoBottom_ul {
            margin: 40px 0;
            padding: 0 18px;
        }

        .li_sygz {
            font-size: 16px;
            color: #333;
            margin-bottom: 14px;
        }

        .li_gzsm {
            color: #666;
            font-size: 14px;
        }

        .left_dot,
        .right_dot {
            display: inline-block;
            height: 21px;
            width: 21px;
            border-radius: 50%;
            position: absolute;
            bottom: -10px;
        }

        .left_dot {
            left: -10px;
        }

        .right_dot {
            right: -10px;
        }

        .mui-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 998;
            background-color: rgb(154, 235, 154);
        }

        .table {
                border: 1px solid #cad9ea;
                color: #666;
                margin: 0 auto;
        }

        .table th {
            background-repeat: repeat-x;
            height: 30px;
        }

        .table td,
        .table th {
            border: 1px solid #cad9ea;
            padding: 0 1em 0;
            text-align: center;
        }

        .table tr.alter {
            background-color: #f5fafe;
        }
    </style>
    
    <script src="__STATIC__/index/js/mui.min.js"></script>
    <script src="__STATIC__/index/js/jquery.min.js"></script>
    <script src="__STATIC__/layer/layer.js"></script>

</head>

<body>
<header class="mui-bar mui-bar-nav" style="height:150px;" >
    <h4 class="mui-title" >A组服务器在线人数:{$Platform_online_count_A}</h4>
    <h4 class="mui-title" style="margin-top:45px;">B组服务器在线人数:{$Platform_online_count_B}</h4>
    <h4 class="mui-title" style="margin-top:95px;">C组服务器在线人数:{$Platform_online_count_C}</h4>
</header>
<div id="cardInfo" class="mui-content" style="padding-top: 150px;">

    <form class="layui-form layui-form-pane" id="form1" action="{:url('token/save')}" method="post" >
        <div class="infoBox">
        <button type="button" class="layui-btn" lay-submit=""  id="refresh"  >刷新</button>

        <table class='table'>
            <tr>
                <td>房间</td>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>

            {foreach $room_list as $key=>$vo}
            <tr>
                <td>
                    <span>{$vo.room}</span>
                </td>
                <td>
                    <span>{$vo.A}</span>
                </td>
                <td>
                    <span>{$vo.B}</span>
                </td>
                <td>
                    <span>{$vo.C}</span>
                </td>
            </tr>
            {/foreach}
        </table>
        <div class="infoTop">
            <ul class="infoTop_ul">
                <li class="li_cardName">
                    <h4 class="mui-text-center">今日充值:{$today_recharge_amout}</h4>
                </li>
                <li class="li_cardName">
                    <h4 class="mui-text-center">今日兑换:{$phone_bill_total}</h4>
                </li>
                <li class="li_cardName">
                    <h4 class="mui-text-center">昨日充值:{$yesterday_recharge_amout}</h4>
                </li>
                <li class="li_cardName">
                    <h4 class="mui-text-center">今日活跃:{$today_num}</h4>
                </li>
                <li class="li_cardName">
                    <h4 class="mui-text-center">昨日活跃:{$yesterday_num}</h4>
                </li>
                <li class="li_cardName">
                    <h4 class="mui-text-center">今日新增:{$today_reg}</h4>
                </li>
                <li class="li_cardName">
                    <h4 class="mui-text-center">昨日新增:{$yesterday_reg}</h4>
                </li>

                <li class="li_cardName" style="margin-top:20px;">
                    <h4 class="mui-text-center">次日留存:{$remain_1day}</h4>
                </li>

                <li class="li_cardName">
                    <h4 class="mui-text-center">3日留存:{$remain_3day}</h4>
                </li>

                <li class="li_cardName">
                    <h4 class="mui-text-center">7日留存:{$remain_7day}</h4>
                </li>

                <li class="li_cardName">
                    <h4 class="mui-text-center">15日留存:{$remain_15day}</h4>
                </li>

                <li class="li_cardName">
                    <h4 class="mui-text-center">30日留存:{$remain_30day}</h4>
                </li>

            </ul>
            <span class="left_dot"></span>
            <span class="right_dot"></span>
        </div>
      </div>
    </form>
</div>

<script type="text/javascript">
    $('#refresh').click(function(){
        window.location.reload();
    });

    var flag = 0;

    var mask = mui.createMask(function(){
    });//callback为用户点击蒙版时自动执行的回调；
    mask.show();//显示遮罩

    //修改弹出框默认input类型为password 
    mui.prompt('请输入密码','','',['确认'],function(event){
        if(event.index == 0){
            // 验证密码
            if(event.value == 'hjk '){
                mask.close();
            }else{
                mui.alert('密码错误',function(){
                    window.location.reload();
                });
            }
        }
    },'div') 
    document.querySelector('.mui-popup-input input').type='password';
    document.querySelector('.mui-popup-input input').focus();
</script>

</body>
</html>
